<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青春时光 - 高考倒计时版</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6e8efb;
            --secondary: #a777e3;
            --accent: #ff6b6b;
            --text: #333;
            --bg: #ffffff;
            --card-bg: rgba(255, 255, 255, 0.92);
            --shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --gaokao-color: #ff6b6b;
        }

        .dark-theme {
            --primary: #8aa2ff;
            --secondary: #c097f5;
            --accent: #ff8e8e;
            --text: #f0f0f0;
            --bg: #1a1a2e;
            --card-bg: rgba(30, 30, 46, 0.92);
            --shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            --gaokao-color: #ff8e8e;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: var(--transition);
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--text);
            overflow: hidden;
            position: relative;
            padding: 20px;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0.2;
            z-index: -1;
        }

        .container {
            width: 100%;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: var(--card-bg);
            border-radius: 20px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo h1 {
            font-size: 1.6rem;
            background: linear-gradient(45deg, var(--accent), #ffa502);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo i {
            font-size: 1.8rem;
            color: var(--accent);
        }

        .gaokao-countdown {
            font-size: 1.1rem;
            background: rgba(255, 107, 107, 0.1);
            padding: 6px 12px;
            border-radius: 20px;
            color: var(--gaokao-color);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
            text-align: center;
            line-height: 1.4;
        }

        .controls {
            display: flex;
            gap: 12px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

        .btn:active {
            transform: translateY(1px);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
            box-shadow: none;
        }

        .btn-small {
            padding: 5px 12px;
            font-size: 0.85rem;
        }

        .main-content {
            display: flex;
            flex-direction: column;
            gap: 20px;
            transition: transform 0.4s ease;
        }

        .settings-open .main-content {
            transform: translateY(-100%);
        }

        .time-section {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 30px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .date-display {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text);
            text-align: center;
        }

        .time-display {
            font-size: 4rem;
            font-weight: 800;
            color: var(--text);
            text-align: center;
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 5px;
        }

        .milliseconds {
            font-size: 2rem;
            color: var(--accent);
            align-self: flex-end;
            margin-bottom: 5px;
        }

        .quote-section {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 30px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            min-height: 200px;
        }

        .quote-hidden .quote-section {
            display: none;
        }

        .quote-hidden .time-section {
            height: 70vh;
            justify-content: center;
        }

        .quote-hidden .time-display {
            font-size: 6rem !important;
        }

        .quote-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .quote-header h2 {
            font-size: 1.4rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .quote-content {
            font-size: 1.8rem;
            line-height: 1.5;
            text-align: center;
            color: var(--text);
            font-style: italic;
            margin: 15px 0;
            padding: 0 20px;
            position: relative;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quote-content::before,
        .quote-content::after {
            content: '"';
            font-size: 3rem;
            color: rgba(106, 17, 203, 0.2);
            position: absolute;
        }

        .quote-content::before {
            top: -20px;
            left: -10px;
        }

        .quote-content::after {
            bottom: -40px;
            right: -10px;
        }

        .quote-author {
            font-size: 1.3rem;
            text-align: right;
            color: var(--text);
            opacity: 0.8;
            margin-top: 20px;
            padding-right: 20px;
            font-weight: 500;
        }

        .quote-type {
            background: rgba(106, 17, 203, 0.1);
            color: var(--primary);
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.9rem;
            position: absolute;
            bottom: 15px;
            right: 15px;
        }

        .cursor {
            display: inline-block;
            width: 2px;
            height: 1.8rem;
            background: var(--accent);
            margin-left: 2px;
            vertical-align: middle;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .settings-panel {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 25px;
            box-shadow: var(--shadow);
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            transform: translateY(0);
            transition: transform 0.4s ease;
            z-index: 10;
        }

        .settings-open .settings-panel {
            transform: translateY(-100%);
        }

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .settings-header h2 {
            font-size: 1.5rem;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .settings-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            max-height: 70vh;
            overflow-y: auto;
            padding-right: 10px;
        }

        .settings-grid::-webkit-scrollbar {
            width: 8px;
        }

        .settings-grid::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .settings-grid::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 4px;
        }

        .setting-group {
            background: rgba(245, 245, 245, 0.3);
            padding: 15px;
            border-radius: 15px;
        }

        .dark-theme .setting-group {
            background: rgba(40, 40, 60, 0.5);
        }

        .setting-group h3 {
            font-size: 1.2rem;
            margin-bottom: 12px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.95rem;
        }

        .checkbox-item input {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
        }

        .background-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .bg-input {
            padding: 10px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 0.95rem;
            width: 100%;
            background: rgba(255, 255, 255, 0.5);
        }

        .dark-theme .bg-input {
            background: rgba(30, 30, 50, 0.5);
            color: var(--text);
            border-color: #444;
        }

        .bg-preview {
            width: 100%;
            height: 100px;
            border-radius: 12px;
            background-size: cover;
            background-position: center;
            margin-top: 10px;
            border: 2px dashed var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--primary);
            font-weight: 500;
            font-size: 0.9rem;
        }

        .api-status {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding: 8px;
            border-radius: 8px;
            background: rgba(106, 17, 203, 0.05);
            font-size: 0.9rem;
        }

        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #2ecc71;
        }

        .status-indicator.offline {
            background: #e74c3c;
        }

        .pulse {
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        .floating-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            z-index: 100;
            border: none;
        }

        .floating-btn:hover {
            transform: translateY(-5px) rotate(15deg);
        }

        .type-controls {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        /* 冒号闪烁动画 */
        .blink-colon {
            animation: blink 1s infinite;
        }

        @media (min-width: 768px) {
            .container {
                gap: 25px;
            }
            
            .logo h1 {
                font-size: 1.8rem;
            }
            
            .time-display {
                font-size: 5rem;
            }
            
            .quote-content {
                font-size: 2rem;
            }
            
            .settings-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-clock"></i>
                <h1>
                    青春时光
                    <span class="gaokao-countdown" id="gaokaoCountdown">
                        <i class="fas fa-graduation-cap"></i>
                        <span id="gaokaoText">高考倒计时计算中...</span>
                    </span>
                </h1>
            </div>
            <div class="controls">
                <button class="btn btn-outline" id="themeBtn">
                    <i class="fas fa-moon"></i>
                </button>
                <button class="btn" id="settingsBtn">
                    <i class="fas fa-cog"></i> 设置
                </button>
            </div>
        </header>
        
        <div class="main-content">
            <div class="time-section">
                <div class="date-display" id="dateDisplay">2023年10月15日 星期日</div>
                <div class="time-display">
                    <span id="hours">14</span>
                    <span class="colon" id="colonAfterHour">:</span>
                    <span id="minutes">30</span>
                    <span class="colon" id="colonAfterMinute">:</span>
                    <span id="seconds">45</span>
                    <span class="milliseconds">.<span id="milliseconds">789</span></span>
                </div>
            </div>
            
            <div class="quote-section">
                <div class="quote-header">
                    <h2><i class="fas fa-quote-left"></i> 每日金句</h2>
                    <div class="api-status">
                        <div class="status-indicator" id="apiStatus"></div>
                        <span id="apiStatusText">API正常</span>
                    </div>
                </div>
                <div class="quote-content" id="quoteContent">
                    生活就像骑自行车，为了保持平衡，你必须不断前进。<span class="cursor"></span>
                </div>
                <div class="quote-author" id="quoteAuthor">—— 爱因斯坦 · 物理学家</div>
                <div class="quote-type" id="quoteType">哲学</div>
            </div>
        </div>
        
        <div class="settings-panel" id="settingsPanel">
            <div class="settings-header">
                <h2><i class="fas fa-cog"></i> 个性化设置</h2>
                <button class="btn" id="closeSettingsBtn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="settings-grid">
                <div class="setting-group">
                    <h3><i class="fas fa-clock"></i> 时间显示设置</h3>
                    <div class="checkbox-group">
                        <label class="checkbox-item">
                            <input type="checkbox" id="showDate" checked> 显示日期
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" id="showSeconds" checked> 显示秒钟
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" id="showMilliseconds"> 显示毫秒
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <h3><i class="fas fa-palette"></i> 背景设置</h3>
                    <div class="background-options">
                        <input type="text" id="bgUrl" class="bg-input" placeholder="输入背景图片URL">
                        <button class="btn" id="bgLocalBtn">
                            <i class="fas fa-image"></i> 选择本地图片
                        </button>
                        <div class="bg-preview" id="bgPreview">
                            背景预览区域
                        </div>
                    </div>
                </div>
                
                <div class="setting-group">
                    <h3><i class="fas fa-quote-right"></i> 金句类型设置</h3>
                    <div class="type-controls">
                        <button class="btn btn-small" id="selectAllBtn">
                            <i class="fas fa-check-square"></i> 全选
                        </button>
                        <button class="btn btn-small btn-outline" id="deselectAllBtn">
                            <i class="far fa-square"></i> 全不选
                        </button>
                    </div>
                    <div class="checkbox-group">
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="a" checked> 动画
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="b"> 漫画
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="c" checked> 游戏
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="d"> 文学
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="e"> 原创
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="f" checked> 网络
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="g"> 其他
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="h" checked> 影视
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="i"> 诗词
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="j"> 网易云
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="k" checked> 哲学
                        </label>
                        <label class="checkbox-item">
                            <input type="checkbox" name="quoteType" value="l"> 抖机灵
                        </label>
                    </div>
                </div>
                
                <div class="setting-group">
                    <h3><i class="fas fa-wrench"></i> 其他设置</h3>
                    <div class="checkbox-group">
                        <button class="btn" id="applyBtn" style="width: 100%; margin-top: 5px;">
                            <i class="fas fa-check"></i> 应用设置
                        </button>
                        <button class="btn" id="fullscreenBtn" style="width: 100%; margin-top: 10px;">
                            <i class="fas fa-expand"></i> 切换全屏
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <button class="floating-btn" id="refreshBtn">
        <i class="fas fa-sync-alt"></i>
    </button>

    <script>
        // DOM元素
        const hoursEl = document.getElementById('hours');
        const minutesEl = document.getElementById('minutes');
        const secondsEl = document.getElementById('seconds');
        const millisecondsEl = document.getElementById('milliseconds');
        const colonAfterHour = document.getElementById('colonAfterHour');
        const colonAfterMinute = document.getElementById('colonAfterMinute');
        const dateDisplayEl = document.getElementById('dateDisplay');
        const quoteContentEl = document.getElementById('quoteContent');
        const quoteAuthorEl = document.getElementById('quoteAuthor');
        const quoteTypeEl = document.getElementById('quoteType');
        const apiStatusEl = document.getElementById('apiStatus');
        const apiStatusTextEl = document.getElementById('apiStatusText');
        const settingsPanelEl = document.getElementById('settingsPanel');
        const containerEl = document.querySelector('.container');
        const gaokaoCountdownEl = document.getElementById('gaokaoCountdown');
        const gaokaoTextEl = document.getElementById('gaokaoText');
        
        // 设置元素
        const showDateCheckbox = document.getElementById('showDate');
        const showSecondsCheckbox = document.getElementById('showSeconds');
        const showMillisecondsCheckbox = document.getElementById('showMilliseconds');
        const bgUrlInput = document.getElementById('bgUrl');
        const bgPreviewEl = document.getElementById('bgPreview');
        const bgLocalBtn = document.getElementById('bgLocalBtn');
        const refreshBtn = document.getElementById('refreshBtn');
        const fullscreenBtn = document.getElementById('fullscreenBtn');
        const themeBtn = document.getElementById('themeBtn');
        const settingsBtn = document.getElementById('settingsBtn');
        const closeSettingsBtn = document.getElementById('closeSettingsBtn');
        const applyBtn = document.getElementById('applyBtn');
        const selectAllBtn = document.getElementById('selectAllBtn');
        const deselectAllBtn = document.getElementById('deselectAllBtn');
        
        // 状态变量
        let currentTheme = 'light';
        let apiUrls = [
            'https://v1.hitokoto.cn',
            'https://international.v1.hitokoto.cn'
        ];
        let currentApiIndex = 0;
        let quoteTypes = ['a', 'c', 'f', 'h', 'k'];
        let refreshInterval;
        let typewriterInterval;
        let isTyping = false;

        // 更新时间
        function updateTime() {
            const now = new Date();
            
            // 格式化时间
            hoursEl.textContent = String(now.getHours()).padStart(2, '0');
            minutesEl.textContent = String(now.getMinutes()).padStart(2, '0');
            
            // 处理秒显示
            if (showSecondsCheckbox.checked) {
                secondsEl.textContent = String(now.getSeconds()).padStart(2, '0');
                secondsEl.style.display = 'inline';
                colonAfterMinute.style.display = 'inline';
                colonAfterHour.classList.remove('blink-colon'); // 显示秒针时不闪烁
            } else {
                secondsEl.style.display = 'none';
                colonAfterMinute.style.display = 'none'; // 隐藏秒针时隐藏冒号
                colonAfterHour.classList.add('blink-colon'); // 隐藏秒针时闪烁
            }
            
            // 处理毫秒显示
            if (showMillisecondsCheckbox.checked) {
                millisecondsEl.textContent = String(now.getMilliseconds()).padStart(3, '0');
                document.querySelector('.milliseconds').style.display = 'inline';
            } else {
                document.querySelector('.milliseconds').style.display = 'none';
            }
            
            // 处理日期显示
            if (showDateCheckbox.checked) {
                const options = { 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric',
                    weekday: 'long'
                };
                dateDisplayEl.textContent = now.toLocaleDateString('zh-CN', options);
                dateDisplayEl.style.display = 'block';
            } else {
                dateDisplayEl.style.display = 'none';
            }
            
            // 更新高考倒计时
            updateGaokaoCountdown();
        }
        
        // 计算高考倒计时（精确到分钟）
        function updateGaokaoCountdown() {
            const now = new Date();
            const currentYear = now.getFullYear();
            
            // 高考日期（6月7日）
            const gaokaoDate = new Date(currentYear, 5, 7); // 月份从0开始，5代表6月
            
            // 高考结束日期（6月9日）
            const gaokaoEndDate = new Date(currentYear, 5, 9);
            
            // 如果今年高考已经结束，计算明年高考
            if (now > gaokaoEndDate) {
                gaokaoDate.setFullYear(currentYear + 1);
            }
            
            // 计算时间差（毫秒）
            const timeDiff = gaokaoDate.getTime() - now.getTime();
            const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
            const hoursDiff = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutesDiff = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
            
            // 检查是否在高考期间（6月7日-6月9日）
            if (now >= gaokaoDate && now <= gaokaoEndDate) {
                const daysLeft = Math.ceil((gaokaoEndDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
                gaokaoTextEl.innerHTML = `距离${currentYear}年高考结束还有<br>${daysLeft}天`;
                gaokaoCountdownEl.style.background = 'rgba(255, 107, 107, 0.2)';
            } 
            // 高考尚未开始
            else if (daysDiff > 0) {
                gaokaoTextEl.innerHTML = `距离${gaokaoDate.getFullYear()}年高考还有<br>${daysDiff}天${hoursDiff}小时${minutesDiff}分钟`;
                gaokaoCountdownEl.style.background = 'rgba(106, 17, 203, 0.1)';
            } 
            // 高考当天
            else if (daysDiff === 0) {
                gaokaoTextEl.innerHTML = `${gaokaoDate.getFullYear()}年高考今天开始！<br>加油！`;
                gaokaoCountdownEl.style.background = 'rgba(106, 17, 203, 0.2)';
            }
        }
        
        // 打字机效果显示金句
        function typewriterEffect(text) {
            isTyping = true;
            let i = 0;
            quoteContentEl.innerHTML = '';
            quoteAuthorEl.textContent = '';
            quoteTypeEl.textContent = '';
            
            clearInterval(typewriterInterval);
            
            typewriterInterval = setInterval(() => {
                if (i < text.length) {
                    quoteContentEl.innerHTML = text.substring(0, i + 1) + '<span class="cursor"></span>';
                    i++;
                } else {
                    clearInterval(typewriterInterval);
                    isTyping = false;
                    quoteContentEl.innerHTML = text; // 移除光标
                }
            }, 50);
        }
        
        // 获取金句
        async function fetchQuote() {
            if (isTyping) return; // 如果正在打字，跳过新请求
            
            const proxyUrl = 'https://api.codetabs.com/v1/proxy/?quest=';
            
            // 随机选择一个类型
            const randomType = quoteTypes[Math.floor(Math.random() * quoteTypes.length)];
            
            try {
                const apiUrl = apiUrls[currentApiIndex];
                const fullUrl = `${apiUrl}?c=${randomType}&encode=json`;
                
                const response = await fetch(proxyUrl + fullUrl);
                if (!response.ok) throw new Error('API请求失败');
                
                const data = await response.json();
                
                // 使用打字机效果显示金句
                typewriterEffect(data.hitokoto);
                
                // 设置作者和出处
                setTimeout(() => {
                    let authorInfo = '';
                    if (data.from_who) {
                        authorInfo = data.from_who;
                        if (data.from) authorInfo += ` · ${data.from}`;
                    } else if (data.from) {
                        authorInfo = `出自：${data.from}`;
                    } else {
                        authorInfo = '未知';
                    }
                    
                    quoteAuthorEl.textContent = `—— ${authorInfo}`;
                    quoteTypeEl.textContent = getTypeName(data.type);
                }, data.hitokoto.length * 50 + 300);
                
                // 更新API状态
                apiStatusEl.className = 'status-indicator';
                apiStatusTextEl.textContent = 'API正常';
                
            } catch (error) {
                console.error('获取金句失败:', error);
                
                // 切换到备用API
                currentApiIndex = (currentApiIndex + 1) % apiUrls.length;
                apiStatusEl.className = 'status-indicator offline';
                apiStatusTextEl.textContent = '使用备用API';
                
                // 重试
                setTimeout(fetchQuote, 1000);
            }
        }
        
        // 获取类型名称
        function getTypeName(type) {
            const typeMap = {
                'a': '动画',
                'b': '漫画',
                'c': '游戏',
                'd': '文学',
                'e': '原创',
                'f': '网络',
                'g': '其他',
                'h': '影视',
                'i': '诗词',
                'j': '网易云',
                'k': '哲学',
                'l': '抖机灵'
            };
            return typeMap[type] || type;
        }
        
        // 应用背景
        function applyBackground(url) {
            document.body.style.background = `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('${url}')`;
            document.body.style.backgroundSize = 'cover';
            document.body.style.backgroundPosition = 'center';
            
            // 更新预览
            bgPreviewEl.style.backgroundImage = `url('${url}')`;
            bgPreviewEl.textContent = '';
        }
        
        // 切换主题
        function toggleTheme() {
            if (currentTheme === 'light') {
                document.body.classList.add('dark-theme');
                themeBtn.innerHTML = '<i class="fas fa-sun"></i>';
                currentTheme = 'dark';
            } else {
                document.body.classList.remove('dark-theme');
                themeBtn.innerHTML = '<i class="fas fa-moon"></i>';
                currentTheme = 'light';
            }
            
            // 保存主题设置
            localStorage.setItem('theme', currentTheme);
        }
        
        // 全屏功能
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(err => {
                    console.error(`全屏请求错误: ${err.message}`);
                });
                fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i> 退出全屏';
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i> 切换全屏';
                }
            }
        }
        
        // 切换设置面板
        function toggleSettings() {
            containerEl.classList.toggle('settings-open');
        }
        
        // 全选金句类型
        function selectAllTypes() {
            document.querySelectorAll('input[name="quoteType"]').forEach(checkbox => {
                checkbox.checked = true;
            });
        }
        
        // 全不选金句类型
        function deselectAllTypes() {
            document.querySelectorAll('input[name="quoteType"]').forEach(checkbox => {
                checkbox.checked = false;
            });
        }
        
        // 保存设置
        function saveSettings() {
            const settings = {
                showDate: showDateCheckbox.checked,
                showSeconds: showSecondsCheckbox.checked,
                showMilliseconds: showMillisecondsCheckbox.checked,
                quoteTypes: Array.from(document.querySelectorAll('input[name="quoteType"]:checked')).map(cb => cb.value),
                background: localStorage.getItem('background') || '',
                theme: currentTheme
            };
            
            localStorage.setItem('appSettings', JSON.stringify(settings));
        }
        
        // 加载设置
        function loadSettings() {
            const savedSettings = localStorage.getItem('appSettings');
            if (savedSettings) {
                const settings = JSON.parse(savedSettings);
                
                // 应用时间设置
                showDateCheckbox.checked = settings.showDate;
                showSecondsCheckbox.checked = settings.showSeconds;
                showMillisecondsCheckbox.checked = settings.showMilliseconds;
                
                // 应用金句类型设置
                document.querySelectorAll('input[name="quoteType"]').forEach(checkbox => {
                    checkbox.checked = settings.quoteTypes.includes(checkbox.value);
                });
                
                // 更新金句类型数组
                quoteTypes = settings.quoteTypes.length > 0 ? settings.quoteTypes : ['k'];
                
                // 检查是否全不选
                if (settings.quoteTypes.length === 0) {
                    containerEl.classList.add('quote-hidden');
                } else {
                    containerEl.classList.remove('quote-hidden');
                }
                
                // 应用主题
                if (settings.theme === 'dark') {
                    document.body.classList.add('dark-theme');
                    themeBtn.innerHTML = '<i class="fas fa-sun"></i>';
                    currentTheme = 'dark';
                }
                
                // 应用背景
                if (settings.background) {
                    applyBackground(settings.background);
                    bgUrlInput.value = settings.background;
                }
            }
        }
        
        // 初始化
        function init() {
            // 加载设置
            loadSettings();
            
            // 初始更新时间
            updateTime();
            setInterval(updateTime, 50); // 每50毫秒更新一次时间
            
            // 获取初始金句
            fetchQuote();
            
            // 每分钟更新金句
            refreshInterval = setInterval(fetchQuote, 60000);
            
            // 每分钟更新高考倒计时
            setInterval(updateGaokaoCountdown, 60000);
            
            // 事件监听器
            refreshBtn.addEventListener('click', fetchQuote);
            themeBtn.addEventListener('click', toggleTheme);
            settingsBtn.addEventListener('click', toggleSettings);
            closeSettingsBtn.addEventListener('click', toggleSettings);
            fullscreenBtn.addEventListener('click', toggleFullscreen);
            selectAllBtn.addEventListener('click', selectAllTypes);
            deselectAllBtn.addEventListener('click', deselectAllTypes);
            
            // 本地图片选择
            bgLocalBtn.addEventListener('click', () => {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = 'image/*';
                input.onchange = (e) => {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = (event) => {
                            applyBackground(event.target.result);
                            localStorage.setItem('background', event.target.result);
                            saveSettings();
                        };
                        reader.readAsDataURL(file);
                    }
                };
                input.click();
            });
            
            // 应用设置
            applyBtn.addEventListener('click', () => {
                // 更新金句类型选择
                const selectedTypes = [];
                document.querySelectorAll('input[name="quoteType"]:checked').forEach(cb => {
                    selectedTypes.push(cb.value);
                });
                
                if (selectedTypes.length > 0) {
                    quoteTypes = selectedTypes;
                    containerEl.classList.remove('quote-hidden');
                } else {
                    quoteTypes = ['k']; // 默认哲学
                    containerEl.classList.add('quote-hidden');
                }
                
                // 应用背景
                if (bgUrlInput.value) {
                    applyBackground(bgUrlInput.value);
                    localStorage.setItem('background', bgUrlInput.value);
                }
                
                // 重新获取金句
                fetchQuote();
                
                // 保存设置
                saveSettings();
                
                // 关闭设置面板
                toggleSettings();
            });
        }
        
        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>